﻿<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>搜索页面</title>

    <link href="../AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css"/>
    <link href="../AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet" type="text/css"/>

    <link href="../basic/css/demo.css" rel="stylesheet" type="text/css"/>

    <link href="../css/seastyle.css" rel="stylesheet" type="text/css"/>

    <script type="text/javascript" src="../basic/js/jquery-1.7.min.js"></script>
    <script type="text/javascript" src="../js/script.js"></script>
    <script src="../HT/assets/layer/layer.js" type="text/javascript"></script>
</head>

<body>

<!--顶部导航条 -->
<div class="am-container header">
    <ul class="message-l">
        <div class="topMessage">
            <div class="menu-hd">
<!--                <a href="#" target="_top" class="h">亲，请登录</a>-->
<!--                <a href="" target="_top"</a>-->
            </div>
        </div>
    </ul>
    <ul class="message-r">
        <div class="topMessage home">
            <div class="menu-hd"><a href="./home.html" target="_top" class="h">商城首页</a></div>
        </div>
        <div class="topMessage my-shangcheng">
            <div class="menu-hd MyShangcheng"><a href="../person/index.html" target="_top"><i class="am-icon-user am-icon-fw"></i>个人中心</a>
            </div>
        </div>
        <div class="topMessage mini-cart">
            <div class="menu-hd"><a id="mc-menu-hd" href="./shopcart.html" target="_top"><i
                    class="am-icon-shopping-cart  am-icon-fw"></i><span>购物车</span><strong id="J_MiniCartNum"
                                                                                          class="h">0</strong></a></div>
        </div>
        <div class="topMessage favorite">
<!--            <div class="menu-hd"><a href="#" target="_top"><i class="am-icon-heart am-icon-fw"></i><span></span></a>-->
<!--            </div>-->
        </div>
    </ul>
</div>

<!--悬浮搜索框-->

<div class="nav white">
    <div class="logo"><img src="../images/logo.png"/></div>
    <div class="logoBig">
        <li><img src="../images/logobig.png"/></li>
    </div>

    <div class="search-bar pr">
        <a name="index_none_header_sysc" href="#"></a>
        <form>
            <input id="searchInput" name="index_none_header_sysc" type="text" placeholder="搜索" autocomplete="off">
            <input id="ai-topsearch" class="submit am-btn" value="搜索" index="1" type="button">
        </form>
    </div>
</div>

<div class="clear"></div>
<b class="line"></b>
<div class="search">
    <div class="search-list">
        <div class="nav-table">
            <div class="long-title"><span class="all-goods">全部分类</span></div>
            <div class="nav-cont">
                <ul>
                    <li class="index"><a href="#">首页</a></li>
                    <li class="qc"><a href="#">闪购</a></li>
                    <li class="qc"><a href="#">限时抢</a></li>
                    <li class="qc"><a href="#">团购</a></li>
                    <li class="qc last"><a href="#">大包装</a></li>
                </ul>
                <div class="nav-extra">
                    <i class="am-icon-user-secret am-icon-md nav-user"></i><b></b>我的福利
                    <i class="am-icon-angle-right" style="padding-left: 10px;"></i>
                </div>
            </div>
        </div>
        <div class="am-g am-g-fixed">
            <div class="am-u-sm-12 am-u-md-12">
                <div class="search-content">
                    <div class="sort">
                        <li class="type-li" value="zonghe"><a title="综合">综合排序</a></li>
                        <li class="type-li" value="xiaoliang"><a title="销量">销量排序</a></li>
                        <li class="first type-li" value="jiage"><a title="价格">价格优先</a></li>
                        <li class="type-li" value="pingjia"><a title="评价" href="#">评价为主</a></li>
                    </div>
                    <div class="clear"></div>

                    <ul class="am-avg-sm-2 am-avg-md-3 am-avg-lg-4 boxes">

                    </ul>
                </div>
                <div class="clear"></div>
                <!--分页 -->
                <ul class="am-pagination am-pagination-right">
                    <li><a class="uplimit" value="-1">&laquo;</a></li>
                    <li class="am-active"><a class="curret-a">1</a></li>
                    <li><a class="nextlimit" value="+1">&raquo;</a></li>
                    <span>共<strong class="allPage">1</strong>页</span>
                    <li>到第<input placeholder="1" class="to-page" type="text" style="text-align: center;width: 30px;height: 30px;border: 1px solid #CCC;padding: 3px;"/>页
                    </li>
                    <li><input class="commit" value="确定" type="button"
                               style="border: 1px solid #DDD;padding: 4px 13px 5px;color: #666;background-color: #f7f7f7;"/>
                    </li>
                </ul>
            </div>
        </div>
        <div class="footer">
            <div class="footer-hd">
                <p>
                    <a href="#">商城首页</a>
                    <b>|</b>
                    <a href="#">支付宝</a>
                    <b>|</b>
                    <a href="#">物流</a>
                </p>
            </div>
            <div class="footer-bd">
                <p style="text-align:center;">
                    <a href="#">合作伙伴</a>
                    <a href="#">联系我们</a>
                    <a href="#">网站地图</a>
                    <em style="text-align:center;">© 2015-2025 zking 版权所有</em>
                </p>
            </div>
        </div>
    </div>

</div>

<!--引导 -->
<div class="navCir">
    <li><a href="home2.html"><i class="am-icon-home "></i>首页</a></li>
    <li><a href="sort.html"><i class="am-icon-list"></i>分类</a></li>
    <li><a href="shopcart.html"><i class="am-icon-shopping-basket"></i>购物车</a></li>
    <li><a href="../person/index.html"><i class="am-icon-user"></i>我的</a></li>
</div>


<script>
    window.jQuery || document.write('<script src="basic/js/jquery-1.9.min.js"><\/script>');
</script>
<script type="text/javascript" src="../basic/js/quick_links.js"></script>


</body>
<script type="text/javascript">

    //点击搜索按钮
    $("#ai-topsearch").click(function () {
        if ($("#searchInput").val().length == 0) {
            layer.msg('未输入关键字!', {icon: 1, time: 1000});
            return;
        }
        getGoods(current, $("#searchInput").val(), 10, searchType);
    });

    //读取url中的参数
    function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] == variable) {
                return decodeURIComponent(pair[1]);
            }
        }
        return false;
    }


    //关键字
    var key = getQueryVariable("key");

    console.log(key)
    //页面大小为12
    var size = 12;

    //当前页
    var current = 1;

    var searchType = "jiage";
    //点击切换排序
    $(".type-li").click(function () {
        $(".type-li").removeClass("first");
        $(this).addClass("first");
        searchType = $(this).attr("value");
        getGoods(1, key, 10, searchType);
    })

    //点击上一页
    $(".uplimit").click(function () {
        var temp = $(this).attr("value");
        if (temp == current) {
            layer.msg('已为第一页!', {icon: 1, time: 1500});
            return;
        }
        getGoods(temp, key, 10, searchType);
    })
    //点击下一页
    $(".nextlimit").click(function () {
        var temp = $(this).attr("value");
        if (temp == current) {
            layer.msg('已为最后一页!', {icon: 1, time: 1500});
            return;
        }
        getGoods(temp, key, 10, searchType);
    })
    //点击跳转按钮
    $(".commit").click(function () {
        var temp = $(".to-page").val();
        var allPage = $(".curret-a").text();
        if (!(/(^[1-9]\d*$)/.test(temp))) {
            layer.msg('数据必须为大于0的整数!', {icon: 1, time: 1000});
            $(".to-page").val(current);
            return;
        }
        if (temp > allPage) {
            layer.msg('超出页面大小!', {icon: 1, time: 1500});
            $(".to-page").val(current);
            return
        }
        getGoods(temp, key, 10, searchType);
    })

    //打印搜索信息
    function printSearch(data) {
        var html = '';
        console.log(data.data.count);
        for (var i = 0; i < data.data.count; i++) {
            html += '<li class="goods-li" shopID="' + data.data.datas[i].goodsId + '"><div class="i-pic limit"><img src="' + data.data.datas[i].goodsImg1 + '"/>';
            html += '<p class="price fl" style="font-size: 30px"><b>¥</b><strong>' + data.data.datas[i].goodsPrice;
            html += '</strong></p><p class="title fl" style="color: #666 ;line-height: 20px;">';
            html += data.data.datas[i].goodsName + '</p>';
            html += '<p>  &nbsp;&nbsp;累计销量' + data.data.datas[i].goodsAccumulate + '</p>'
            html += '<p style="color: #999">【' + data.data.datas[i].businessName.businessName + '】</p></div></li>'
        }
        $(".boxes").html(html);
        //修改总页数
        $(".allPage").text(data.data.totalPage);
        //修改上一页
        $(".uplimit").attr("value", data.data.upPage);
        //修改下一页
        $(".uplimit").attr("value", data.data.nextPage);
        //修改当前页
        current = data.data.currentPage;
        $(".curret-a").text(current);
        $(".goods-li").click(function () {
            location.href = "./introduction.html?shopID=" + $(this).attr("shopID");
        })
    }

    function getGoods(currentPage, key, limitPage, searchType) {
        $.ajax({
            url: "http://localhost:8080/SnacksShop/public.do?type=searchGoods",
            type: "post",
            data: {
                key: key,
                currentPage: currentPage,
                limitPage: limitPage,
                searchType: searchType
            },
            crossDomain: true,
            xhrFields: {
                withCredentials: true
            },
            success: function (data) {
                data = JSON.parse(data);
                if (data.count == 0) {
                    console.log("wu")
                } else
                    printSearch(data);
            },
            error: function (data) {
            }
        });
    }

    if (key) {
        getGoods(current, key, 10, searchType);
    }
</script>
</html>